<template>
  <Card class="common-search mb-4">
    <RadioGroup v-model:value="activeButtonItem.value" button-style="solid" class="mr-4">
      <RadioButton @click="handleChangeType(item)" v-for="item in commonButtonList" :value="item.value"
        :key="item.value">{{ item.label }}
      </RadioButton>
    </RadioGroup>
    <DatePicker class="mr-4" v-if="!activeButtonItem.isRange" v-model:value="datePickerValue" :picker="picker"
      :disabled-date="disabledDate">
    </DatePicker>
    <RangePicker class="mr-4" v-else v-model:value="rangePickerValue" :picker="picker" :disabled-date="disabledDate">
    </RangePicker>
    <div class="btn-box">
      <Button type="primary" @click="search" class="mr-4">查询</Button>
      <Button type="primary" @click="resetting">重置</Button>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Button, Card, RangePicker, DatePicker, RadioGroup, RadioButton, message } from 'ant-design-vue';
import { ref, computed, unref, reactive } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import { PickerMode } from 'ant-design-vue/es/vc-picker/interface';
import { cloneDeep } from 'lodash-es';

const emit = defineEmits(['search']);

const commonButtonList: Array<{
  label: string,
  value: PickerMode | string,
  isRange?: boolean,
  format: string
}> = [
    { label: '日', value: 'day', isRange: false, format: 'YYYY-MM-DD' },
    // { label: '周', value: 'week', isRange: false, format: 'YYYY-wo' },
    { label: '月', value: 'month', isRange: false, format: 'YYYY-MM' },
    { label: '年', value: 'year', isRange: false, format: 'YYYY' },
    { label: '历年', value: 'hisYear', isRange: true, format: 'YYYY' },
    { label: '自定义', value: 'custom', isRange: true, format: 'YYYY-MM-DD' },
  ]

const pickerObj = {
  day: 'date',
  hisYear: 'year',
  custom: 'date'
}

const datePickerValue = ref<Dayjs>(dayjs())
const rangePickerValue = ref<[Dayjs, Dayjs]>([dayjs(), dayjs()])
let activeButtonItem = reactive(cloneDeep(commonButtonList[0]))

const disabledDate = (current: Dayjs) => {
  return current && current > dayjs().endOf('day')
}
const picker = computed(() => {
  const buttonValue = unref(activeButtonItem).value
  return pickerObj[buttonValue] || buttonValue
}
);

const handleChangeType = (item) => {
  activeButtonItem = Object.assign(activeButtonItem, item)
}

function search() {
  let startDate, endDate
  const { format, isRange, value } = unref(activeButtonItem)
  if (isRange) {
    if (!rangePickerValue.value) {
      message.warning('请先选择日期')
      return
    }
    startDate = rangePickerValue.value![0]!.format(format)
    endDate = rangePickerValue.value![1].format(format)
  } else {
    if (!datePickerValue.value) {
      message.warning('请先选择日期')
      return
    }
    startDate = endDate = datePickerValue.value.format(format)

  }
  emit('search', value, startDate, endDate);
}


function resetting() {
  activeButtonItem = Object.assign(activeButtonItem, commonButtonList[0]);
  rangePickerValue.value = [dayjs(), dayjs()]
  datePickerValue.value = dayjs()
  search()

}

defineExpose({
  search
})
</script>
<style scoped lang="less">
.common-search {
  font-weight: 700;

  :deep(.ant-card-body) {
    display: flex;

    .btn-box {
      flex: 1;
      text-align: right;
    }
  }
}
</style>
